{% extends 'content_base.html' %}

{% block preJQuery %}
<link rel='stylesheet' href='/media/top_button.css' type='text/css' />
<link type="text/css" href="/media/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<link rel="exhibit/data" 
       type="application/jsonp"
       href="https://spreadsheets.google.com/feeds/list/0AnEtH40HxJqMdDdLRkFxMmtWVXhXbjR2cERFaTB4QlE/od6/public/basic?alt=json-in-script"
       ex:converter="googleSpreadsheets" />
<script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js" type="text/javascript"></script>
{% endblock %}

{% block postJQuery %}
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="/media/js/jquery-jscrollpane/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="/media/js/jquery-jscrollpane/jquery.jscrollpane.min.js"></script>
<link   href="articles.js" type="application/json" rel="exhibit/data" />
{% endblock %}

{% block scriptJS %}	
<script type="text/javascript">
	
function refresh() {
	$("article[className='hentry']").addClass("hentry");
	$("div[className='entry-title']").addClass("entry-title");
	$("div[className='entry-subtitle']").addClass("entry-subtitle");
	$("div[className='item-header']").addClass("item-header");
	$("div[className='content']").addClass("content");
	$("div[className='entry-content']").addClass("entry-content");
	$("div[className='project-lastLine']").addClass("project-lastLine");
	$("footer[className='post-info']").addClass("post-info");
	
	$(".hentry").map(function() {
			var $h = 300 - $(this).find('header').height() - $(this).find('footer').height();
			$(this).find('.scroll-pane').height($h);
	});
	
	$('.scroll-pane').jScrollPane({showArrows: true,arrowScrollOnHover: true});
	$('.exhibit-facet-body').jScrollPane({showArrows: true,arrowScrollOnHover: true});
		
	$(".entry-title").each(function(index) {
			$(this).attr('href', "/toolbar_page?iframe=" + $(this).attr('href'));
  	});
};	
	

function onDataLoad() {
	window.exhibit = Exhibit.create();
    window.exhibit.configureFromDOM();
	
	var _historyListener = {
        //onBeforePerform:        function(action) { alert('beforePerform') },
        onAfterPerform: function(action) { refresh() },
    };
	window.simile = SimileAjax;
    window.simile.History.addListener(_historyListener); 
	refresh();	
}

</script>

<style type="text/css">

.articles .hentry, .articles div[className="hentry"] {
	height: 313px;
}

.articles .hentry header, .articles div[clasName="hentry"] header{
	height: auto;
}

.articles .hentry footer, .articles div[className="hentry"] footer {
	height: auto;
}

</style>

{% endblock %}

{% block top_nav %}
<div class="container_24">
	
	<div class="facets grid_21">
			<div class="grid_6">
				<div ex:role="facet" ex:expression=".type" ex:facetLabel="Tipus" ex:height="80px"></div>
			</div>
			<div class="prefix_1 grid_6">
		        <div ex:role="facet" ex:expression=".authors" ex:facetLabel="Autor" ex:height="80px" ></div>
			</div>
			<div class="prefix_1  grid_6">
		        <div ex:role="facet" ex:expression=".year" ex:facetLabel="Any" ex:height="80px"></div>
			</div>
			<div style="clear:both"></div>
	</div>
	
    <a class="awesome" style="float:right;" href="/home">
        <div class="top_nav_button">
            <img height="64" width="64" src="/media/pics/home64.png"><span>Inici</span>
        </div>
    </a>
    <div class="clear">
    </div>
</div>
{% endblock %}

{% block body_parameters %} ex:ondataload="onDataLoad" {% endblock %} 


{% block content_base %}

<div class="container_24 articles">
	<div class="grid_24">
		<div style="display:none;" ex:role="view" ex:showToolbox="false"
			ex:abbreviatedCount=9 ex:grouped="false" 
			ex:orders=".year,.label" ex:directions="descending"
			ex:viewClass="Thumbnail" ex:showHeader="false">
 			<div ex:role="lens">
					<article class="hentry">					
						<header>
							<a class="entry-title" ex:href-content=".url">
								<span ex:content=".title"></span>
							</a>
							<div class="entry-subtitle">
								<span ex:content=""></span>
							</div>
						</header>
						<div class="content" class="scroll-pane">
							<div class="entry-content">
								<p ex:content=".abstract"></p>
							</div>
						</div>
						<footer class="post-info" >
							<div class="project-lastLine" ex:content=".linia"></div>
							<span ex:content=".authors"></span> |
							<span ex:content=".year"></span>
						</footer>
					</article>
			</div>
 		</div>
	</div>
	
	<div class="clear:both"></div>
</div>

{% endblock %}